<template>
  <ContentWrap>
    <el-form :model="queryParams" ref="queryFormRef" label-width="auto" :inline="true">
      <el-form-item label="创建人" prop="creatorId">
        <el-select v-model="queryParams.creatorId" placeholder="请输入创建人" :clearable="true">
          <el-option
            v-for="dict in ownerList"
            :key="dict.id"
            :label="dict.nickname"
            :value="dict.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="创建时间" prop="createTime">
        <el-date-picker
          v-model="queryParams.createTime"
          type="daterange"
          value-format="YYYY-MM-DD HH:mm:ss"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </el-form-item>
      <el-form-item>
        <el-button @click="handleClickSearch">
          <Icon icon="ep:search" />
          搜索
        </el-button>
        <el-button @click="handleClickReset">
          <Icon icon="ep:refresh" />
          重置
        </el-button>
      </el-form-item>
    </el-form>
    <Table
      :columns="columns"
      :page-param="queryParams"
      :adaptive="true"
      :page-data="queryData"
      save-key="MailMarket"
      height-per="90"
      @page-change="getPage"
      @row-dblclick="handleTableDblclick"
    >
      <template #menu="{ row }">
        <context-menu-item label="编辑" @click="handleMenuEdit(row)" />
        <context-menu-item label="取消" @click="handleMenuCancel(row)" />
        <context-menu-item label="删除" @click="handleMenuDelete(row)" />
      </template>
    </Table>
  </ContentWrap>
  <MailMarketEdit ref="editRef" @success="getPage()" />
</template>
<script setup name="MailMarket" lang="ts">
import * as MarketTaskApi from '@/api/market/marketTask'
import * as UserApi from '@/api/system/user/user'
const userList = ref()
import MailMarketEdit from './MailMarketEdit.vue'
import { formatDate } from '@/utils/formatTime'
import { DICT_TYPE, getDictObj } from '@/utils/dict'
const message = useMessage() // 消息弹窗
const editRef = ref()
const ownerList = ref()
const queryFormRef = ref()
const queryParams = ref({
  creatorId: undefined,
  createTime: undefined
})
const queryData = ref()
const columns = [
  {
    label: '任务编号',
    prop: 'taskNo'
  },
  {
    label: '名称',
    prop: 'name'
  },
  {
    label: '发送',
    prop: 'requestCount'
  },
  {
    label: '送达',
    prop: 'deliverCount'
  },
  {
    label: '打开',
    prop: 'openCount'
  },
  {
    label: '点击',
    prop: 'clickCount'
  },
  {
    label: '回复',
    prop: 'replyCount'
  },
  {
    label: '状态',
    prop: 'status',
    formatter: ({ status }) => getDictObj(DICT_TYPE.MARKET_TASK_STATUS, status).label
  },
  {
    label: '发送人',
    prop: 'senderId',
    formatter: ({ sender }) => sender.senderName + '<' + sender.senderAddress + '>'
  },
  {
    label: '回复人',
    prop: 'replyId',
    formatter: ({ reply }) => reply.replyName + '<' + reply.replyAddress + '>'
  },
  {
    label: '是否定时发送',
    prop: 'isScheduled',
    formatter: ({ isScheduled }) => (isScheduled ? '是' : '否')
  },
  {
    label: '发送时间',
    prop: 'sendTime'
  },
  {
    label: '创建人',
    prop: 'creatorId',
    formatter: ({ creatorId }) => userList.value.find((user) => user.id === creatorId)?.nickname
  },
  {
    label: '创建时间',
    prop: 'createTime',
    formatter: ({ createTime }) => formatDate(createTime)
  }
]
/** 初始化 */
onMounted(async () => {
  // 获得用户列表
  userList.value = await UserApi.listAllSimple()
  ownerList.value = await UserApi.getOwnerUser()
  handleClickReset()
})

/** 搜索按钮操作 */
const handleClickSearch = () => {
  getPage()
}

/** 重置按钮操作 */
const handleClickReset = () => {
  queryFormRef.value?.resetFields()
  handleClickSearch()
}

/** 处理响应事件  */
const getPage = async () => {
  queryData.value = await MarketTaskApi.pageQuery(queryParams.value)
}

/** 处理table行双击事件 */
const handleTableDblclick = (row) => {
  editRef.value.open({ mailAddresses: [], type: 'update', id: row.id })
}

/** 处理右击事件 删除 */
const handleMenuDelete = async (row) => {
  await MarketTaskApi.deleted(row.id)
  handleClickSearch()
  message.success('删除成功')
}

/** 处理右击事件 编辑 */
const handleMenuEdit = (row) => {
  editRef.value.open({ mailAddresses: [], type: 'update', id: row.id })
}

/** 处理右击事件 取消 */
const handleMenuCancel = async (row) => {
  await MarketTaskApi.cancel(row.id)
  handleClickSearch()
  message.success('取消成功')
}
</script>
